{% extends 'base.html' %}

{% block title %}My Top Movies{% endblock %}

{% block content %}
<div class="container">
  <h1 class="heading">My Top Movies</h1>
  <p class="description">These are my all-time favourite movies.</p>
  {% for movie in movies %}
  <div class="card" >
    <div class="front" style="background-image: url({{movie.img_url}});">
        <p class="large">{{movie.ranking}}</p>
    </div>
    <div class="back">
      <div>
    <div class="title">{{movie.title}} <span class="release_date">({{movie.year}})</span></div>
        <div class="rating">
            <label>{{movie.rating}}</label>
          <i class="fas fa-star star"></i>
        </div>
          <p class="review">{{movie.review}}</p>
        <p class="overview">
        {{movie.description}}    
        </p>

        <a href="{{ url_for('edit', id=movie.id) }}" class="btn btn-primary">Update</a>
        <a href="{{ url_for('delete',id=movie.id) }}" class="btn btn-danger">Delete</a>

      </div>
    </div>
  </div>
  {% endfor %}
</div>
<div class="container text-center add">
<a href="{{ url_for('add') }}" class="btn btn-primary">Add Movie</a>
</div>

{% endblock %}